<style lang="less">
  	.foot {
		.van-tabbar {
			height: 50px;
			box-shadow:0px 5px 26px 1px rgba(0,0,0,0.16);
			.van-tabbar-item__icon {
				font-size: 18px;
				position: relative;
				margin-bottom: 5px;
				.iconfont {
					font-size: 19px;
					margin-bottom: 5px;
				}
			}
		}
		.van-tabbar-item--active {
			color: #2EB444;
		}
		.van-tabbar-item {
			font-size: 12px;
		}
	}
</style>

<template>
	<div class="foot">
	    <van-tabbar v-model="active">
	        <van-tabbar-item to="/tongxunlu">
	            <span>通讯录</span>
	            <i slot="icon" slot-scope="props" :class="props.active ? icon01.active : icon01.normal"></i>
	        </van-tabbar-item>
	        <van-tabbar-item to="/gonggao">
	            <span>公告</span>
	            <i slot="icon" slot-scope="props" :class="props.active ? icon02.active : icon02.normal"></i>
	        </van-tabbar-item>
	        <van-tabbar-item to="/index">
	            <span>工作</span>
	            <i slot="icon" slot-scope="props" :class="props.active ? icon03.active : icon03.normal"></i>
	        </van-tabbar-item>
	        <van-tabbar-item to="/jinjiqiuzhu">
	            <span>紧急求助</span>
	            <i slot="icon" slot-scope="props" :class="props.active ? icon04.active : icon04.normal"></i>
	        </van-tabbar-item>
			<van-tabbar-item to="/wode">
	            <span>我的</span>
	            <i slot="icon" slot-scope="props" :class="props.active ? icon05.active : icon05.normal"></i>
	        </van-tabbar-item>
	    </van-tabbar>
		<router-view></router-view>
	</div>
</template>

<script>
import bus from "../libs/bus.js"
import {
    Tabbar,
    TabbarItem
} from 'vant'

export default {
    name: 'foot',
    components: {
    	[Tabbar.name]: Tabbar,
        [TabbarItem.name]: TabbarItem
    },
    data() {
        return {
			active: 2,
            icon01: {
                normal: 'iconfont icon-tongxunlu-changtai',
                active: 'iconfont icon-tongxunlu-dianji',
            },
            icon02: {
                normal: 'iconfont icon-gonggao-changtai',
                active: 'iconfont icon-gonggao-dianji',
            },
            icon03: {
                normal: 'iconfont icon-gongzuo-changtai',
                active: 'iconfont icon-gongzuo-dianji',
            },
            icon04: {
                normal: 'iconfont icon-jinjiqiuzhu',
                active: 'iconfont icon-jinjiqiuzhu-dianji',
            },
            icon05: {
                normal: 'iconfont icon-wode',
                active: 'iconfont icon--h-wode',
            }
        }
	},
	methods: {
        getActives(){
        	let routerName = this.$route.path.split("/")[1]
            if(routerName == 'tongxunlu' || routerName == 'tongxunlu_detail') this.active = 0
            else if(routerName == 'gonggao' || routerName == 'gonggao_detail') this.active = 1
            else if(routerName == 'jinjiqiuzhu') this.active = 3
            else if(routerName == 'wode') this.active = 4
            else this.active = 2
        }
	},
	mounted(){
		var _this = this;
		bus.$on('actives',function(value){
			_this.active = value;
		})
		this.getActives()
	},
    watch: {
        '$route' (newRoute) {
            this.getActives()
        }
    }
}
</script>
